<template>
  <van-tabbar
    route
    fixed
    active-color="#661dac"
  >
    <van-tabbar-item icon="home-o" replace to='/home'>
      <span>首页</span>
      <img
        slot="icon"
        slot-scope="props"
        :src="props.active ? icon1.active : icon1.normal"
      >
    </van-tabbar-item>
    <van-tabbar-item icon="search" replace to='/buyHall'>
      <span>采购大厅</span>
      <img
        slot="icon"
        slot-scope="props"
        :src="props.active ? icon2.active : icon2.normal"
      >
    </van-tabbar-item>
    <van-tabbar-item icon="friends-o" replace to='/record'>
      <span>开奖记录</span>
      <img
        slot="icon"
        slot-scope="props"
        :src="props.active ? icon3.active : icon3.normal"
      >
    </van-tabbar-item>
    <van-tabbar-item icon="setting-o" replace to='/personal'>
      <span>个人中心</span>
      <img
        slot="icon"
        slot-scope="props"
        :src="props.active ? icon4.active : icon4.normal"
      >
    </van-tabbar-item>
  </van-tabbar>
</template>

<script>
export default {
  name: 'Tabbar',
  data () {
    return {
      icon1: {
        normal: require('../assets/images/home-normal.png'),
        active: require('../assets/images/home-active.png')
      },
      icon2: {
        normal: require('../assets/images/buckle-normal.png'),
        active: require('../assets/images/buckle-active.png')
      },
      icon3: {
        normal: require('../assets/images/visit-normal.png'),
        active: require('../assets/images/visit-active.png')
      },
      icon4: {
        normal: require('../assets/images/mine-normal.png'),
        active: require('../assets/images/mine-active.png')
      }
    }
  }
}
</script>

<style lang="less" scoped>
  .iconfont {
    font-size: 20px;
  }
  /deep/ .van-tabbar-item__icon img {
    /*width: 25px;*/
    height: 24px;
  }
</style>
